<template>
  <div class="container">
    <div id="screen" ref="screen">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import useMainStore from './store/main/main'
import useSetStore from './store/setting/setting'
import { storeToRefs } from 'pinia'
const mainStore = useMainStore()
const setStore = useSetStore()
const { yb, sm, area, task, product } = storeToRefs(mainStore)
const { setting } = storeToRefs(setStore)
const socket = ref(null)
let screen = ref()
let reconnectTimer
setStore.getSettingList().then(() => {
  mainStore.getSmList()
  mainStore.getProductList()
  mainStore.getDispatchList()
  mainStore.getYbList()
  mainStore.getDispatchList()
  mainStore.getGroupList()
  mainStore.getYbMchineList()
  mainStore.getBreedList()
})

const changeYbArea = (items) => {
  for (let i = 0; i < items.length; i++) {
    const item = items[i]
    if (item.auto != 1 && item.area_worktype == '空桶区') {
      if (!item.point.find((sub) => sub.pstatus_point != '无桶')) {
        item.area_worktype = '满桶区'
        mainStore.getYbEdit(item)
      }
    }
  }
}
const initSocket = () => {
  if (socket.value && socket.value.readyState !== WebSocket.CLOSED) {
    // 如果WebSocket连接尚未关闭，则先关闭它
    socket.value.close()
  }
  socket.value = new WebSocket(window.socket)
  socket.value.onopen = () => {
    console.log('WebSocket连接已打开')
    clearTimeout(reconnectTimer) // 清除之前的重连定时器
  }
  socket.value.onmessage = (event) => {
    const data = JSON.parse(event.data)
    sm.value = data.sm_machine
    yb.value = data.yb_machine
    area.value = data.hc_area
    task.value = data.on_task
    if (setting.value.ybArea.changeAuto && data.yb_machine.length >= 0) {
      changeYbArea(yb.value)
    }
    if (data.product) {
      product.value = data.product
    }
  }
  socket.value.onclose = (event) => {
    console.log('WebSocket连接已关闭')
    // 只有当关闭是由服务器引发的非正常关闭才尝试重连
    if (event.wasClean) {
      console.log('WebSocket连接正常关闭，不再尝试重连')
      reconnectTimer = setTimeout(() => {
        initSocket()
      }, 3000)
    } else {
      console.log('WebSocket连接异常关闭，尝试重连')
      // 设置定时器，延迟3秒后尝试重连
      reconnectTimer = setTimeout(() => {
        initSocket()
      }, 3000)
    }
  }
}
onMounted(() => {
  screen.value.style.transform = `scale(${getScale(2320, 1080)}) translate(-50%, -50%)`
  screen.value.style.width = '2320px'
  screen.value.style.height = '1080px'
  // 初始化WebSocket连接
  initSocket()
})

window.onresize = () => {
  screen.value.style.transform = `scale(${getScale(2320, 1080)}) translate(-50%, -50%)`
}
const getScale = (w, h) => {
  const ww = window.innerWidth / w
  const wh = window.innerHeight / h
  return ww < wh ? ww : wh
}
</script>

<style lang="less" scoped>
.container {
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-color: #003077aa;
  #screen {
    position: fixed;
    // width: 2320px;
    // height: 1080px;
    left: 50%;
    top: 50%;
    background-color: #fff;
    transform-origin: top left;
    /* transform: -50%; */
  }
}
*,
*:before,
*:after {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
</style>
